<template>
	<!-- 预览简历页面 -->
<view class="">
	<!-- 背景颜色 -->
	<view class="box-bg"></view>
	<!--  -->
		<view class="warp">
			
				<!--  -->
				<view class="header">
					<text>姓名</text>
					<uni-icons custom-prefix="iconfont" type="icon-icon-test" size="25" class="sex-icon"></uni-icons>
				</view>
				<!-- 用户信息1 -->
				<view class="userInfo">
					<text>{{age}} </text>
					<text>{{education}} </text>
					<text> {{identity}} </text>
					<text> {{situation}}</text>
				</view>
				<!-- 用户信息2 -->
				<view class="userContact" v-for="(item,index) in info">
					<view class="iconBox">
						<uni-icons custom-prefix="iconfont" :type="item.iconType" size="22"></uni-icons>
					</view>
					<text>{{item.text}}</text>
				</view>
				<!-- 头像 -->
				<view class="box-info-img">
					<image src="/static/page1.jpg" mode="widthFix"></image>
				</view>
				<!--  -->
				<view class="flex">
					<!--教育经历  -->
						<view class="item">
								<text>教育经历</text>
								<view class="userData">
									<view class="left">
										<text>广东科贸职业学院</text>
										<text>专科</text>
										<text>物联网专业</text>
									</view>
									<!--时间 -->
									<view class="time">
										<text>2022.9-2025.09</text>
									</view>
										
							        </view>
									</view>
							<!-- 求职岗位 -->
							<view class="item">
								<text>求职岗位</text>
								<view class="userData">
									<text>前端工程师</text>
									<text>广州</text>
									<text>薪资3000-6000</text>
								</view>
							</view>
							
							<!-- 工作/实习经历 -->
							<view class="item">
								<text>工作/实习经历</text>
								<view class="userData">
									<text>此处省略一万字.....</text>
								</view>
							</view>
					
						<!-- 项目经历 -->
						<view class="item">
							<text>项目经历 </text>
							<view class="userData">
								<text>此处省略一万字.....</text>
							</view>
							</view>
						 
						<!-- 自我评价 -->
						<view class="item"> 
						 <text>自我评价 </text>
							 <view class="userData">
							<text>此处省略一万字.....
							此处省略一万字....
							此处省略一万字....
							此处省略一万字....</text>
							
							 </view>
						</view>
				</view>
				
	
        </view>
</view>
	</view>
	</view>

	
</template>

<script>
	export default {
		data() {
			return {
				age: '19岁',
				education: "专科",
				identity: "应届生",
				situation: '没经验',
				info: [{
						iconType: 'icon-dingwei',
						text: '清远市清城区'
					},
					{
						iconType: 'icon-dianhua',
						text: '12345678911'
					},
					{
						iconType: 'icon-weixin',
						text: 'wx1564856123'
					},

				]

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	// 图标变色
	::v-deep .icon-icon-test{
		color: skyblue !important; 
	}
	/*  */
	.box-bg {
		position: relative;
		height: 300rpx;
		background-color: #00dcb6;

	}
	/* 版心 */
	.warp {
		width: 630rpx;
		margin: 0 auto;
		background-color: #fff;
		position: absolute;
		top: 114rpx;
		left: 60rpx;
		padding: 30rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}

	.header>text {
		font-size: 40rpx;
		margin-right: 30rpx;

	}

	.sex-icon {
			/* color: #00dcb6; */
		/* background-color: pink; */
		/* color: indianred !important; */
	}

	.userInfo {
		margin: 30rpx 10rpx 30rpx 0rpx;
		// background-color:pink;

	}

	.userInfo>text {
		margin: 30rpx 10rpx 30rpx 0rpx;
		padding-right: 15rpx;
	  border-right: 4rpx solid #000;
	}
/* 最后一个text取消右边边框 */
	.userInfo>text:last-child{
		border-right:none;
}
	.userContact {
		display: flex;
		padding: 20rpx 0;
	}

	.userContact .iconBox {
		vertical-align: top;
		margin-right: 30rpx;
	}

	.box-info-img {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		overflow: hidden;
	}

/*  */
.flex{
	display: flex;
	flex-direction: column;
	margin-top: 50rpx;
}
.flex .item:first-child{
	border-top: 1px solid #ccc ;
	padding-top:30rpx ;

}
.item{
	margin: 30rpx 0;
}
.item>text{
	
	font-weight: 700;
	font-size: 35rpx;
}

.item .userData{
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}
.item .userData .left{
	display: flex;
	flex-direction: column;
}
/* .item .userData .time{
	
} */
</style>
